<template>
	<view class="con">
		<!-- 页面标题 start -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">公告详情</block>
		</cu-custom>
		<!-- 页面标题 end -->
		<scroll-view :scroll-y="true" class="detail-con col-warpper">
			<view class="header-con">
				<view class="col-warpper title">
					{{info.title}}
				</view>
				<view class="col-warpper publish-time">
					<view>选取方式:{{XQFS[info.selectmode]}}</view>
					<view>发布时间: {{info.createTime}}</view>
				</view>
			</view>
			<view class="content col-warpper">
				<uInfoTable label="项目名称" v-model="info.title"></uInfoTable>
				<uInfoTable label="项目编号" v-model="info.number"></uInfoTable>
				<uInfoTable label="项目申请单位" v-model="info.title"></uInfoTable>
				<uInfoTable label="联系人" v-model="info.xmlxr"></uInfoTable>
				<uInfoTable label="联系电话" v-model="info.xmlxrdh"></uInfoTable>
				<uInfoTable label="中介超市联系电话" v-model="CSDH[info.qybm]"></uInfoTable>
				<uInfoTable label="项目基本情况" v-model="info.content" :html="true"></uInfoTable>
				<uInfoTable label="项目完成时限" v-model="info.handlelimit"></uInfoTable>
				<uInfoTable label="拟定服务费" v-model="serviceSpend"></uInfoTable>
				<uInfoTable label="中介服务机构条件" v-model="info.jigoutj" :html="true"></uInfoTable>
				<uInfoTable label="超市业务类型" v-model="info.membercatpath"></uInfoTable>
				<uInfoTable v-show="existSignUpTime" label="报名时间" v-model="signUpTime"></uInfoTable>
				<uInfoTable label="选取方式" v-model="XQFS[info.selectmode]"></uInfoTable>
				<uInfoTable v-show="existSelectTime" label="选取时间" v-model="selectTime"></uInfoTable>
				<uInfoTable label="选取地点" v-model="info.yaohaoaddress"></uInfoTable>
				<uInfoTable v-show="checkExist(info.count)" label="竞价次数" v-model="info.count"></uInfoTable>
				<uInfoTable label="发布时间" v-model="publishTime"></uInfoTable>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import xmggMixins from "@/common/request/xmggMixins.js"
	export default {
		mixins: [xmggMixins],
		created() {
			this.initData()
		},
		computed: {
			/**
			 * 拟定服务费
			 */
			serviceSpend() {
				switch (this.info.servicetype) {
					case 1:
						return String(this.info.servicefee) + "万元"
					case 2:
						return String(this.info.servicefeelv) + "%"
					default:
						return ""
				}
			},
			/**
			 * 是否存在报名时间
			 */
			existSignUpTime() {
				return this.checkExist(this.info.bmstarttime) && this.checkExist(this.info.bmendtime)
			},
			/**
			 * 报名时间
			 */
			signUpTime() {
				if (this.checkExist(this.info.bmstarttime) && this.checkExist(this.info.bmendtime)) {
					return this.makeTime(this.info.bmstarttime) + " ~ " + this.makeTime(this.info.bmendtime)
				} else {
					return ""
				}
			},
			/**
			 * 是否存在选取时间
			 */
			existSelectTime() {
				return this.checkExist(this.info.yaohaostartdate) && this.checkExist(this.info.yaohaodate)
			},
			/**
			 * 选取时间
			 */
			selectTime() {
				if (this.existSelectTime) {
					return this.makeTime(this.info.yaohaostartdate) + " ~ " + this.makeTime(this.info.yaohaodate)
				} else {
					return ""
				}
			},
			/**
			 * 发布时间
			 */
			publishTime() {
				// return this.makeTime(this.info.createTime)
				return this.info.createTime
			}
		},
		data() {
			return {
				body: "",
				info: {
					body: "",
					title: ""
				}
			}
		},
		methods: {
			/**
			 * 加载数据
			 */
			initData() {
				const pd = {
					id: this.$route.query.id
				}
				this.queryById(pd, data => {
					this.info = data
				})
			},
			/**
			 * 判断是否存在
			 * @param {Object} val
			 */
			checkExist(val) {
				return !(val === undefined || val === null)
			},
			/**
			 * 处理时间字符串
			 * @param {Object} time
			 */
			makeTime(time) {
				return time.split(" ")[0]
			}
		}
	}
</script>

<style lang="less">
	.detail-con {
		padding: 5px 25px;

		// --- 头部 ---
		.header-con {
			border-bottom: 1px solid #CCCCCC;
			padding: 10px;
			margin-bottom: 15px;

			.title {
				font-size: 18px;
				font-weight: 700;
				line-height: 30px;
			}

			.publish-time {
				color: #CCCCCC;
				font-size: 16px;
			}
		}

		// --- 内容列表 ---
		.content {
			align-items: stretch;
		}
	}
</style>
